<div class="devui-search" [class.devui-gray-style]="styleType === 'gray'">
  <input
    #filterInput
    [dAutoFocus]="autoFocus"
    [placeholder]="placeholder || i18nCommonText?.searchPlaceholder"
    (change)="inputChange(filterInput.value, $event)"
    (keyup)="inputChange(filterInput.value, $event)"
    [attr.maxlength]="maxLength"
    [disabled]="disabled"
    (blur)="inputBlur()"
    type="text"
    class="devui-input {{ cssClass }}"
    [ngClass]="{
      'devui-input-sm': size === 'sm',
      'devui-input-lg': size === 'lg',
      'devui-clear-exit': clearIconExit,
      'devui-icon-left': iconPosition === 'left',
      'devui-search-no-border': noBorder === true
    }"
  />
  <span
    class="devui-search-icon"
    [ngClass]="{ 'devui-search-icon-sm': size === 'sm', 'devui-search-icon-lg': size === 'lg', 'devui-icon-left': iconPosition === 'left' }"
    (click)="clickSearch(filterInput.value)"
  >
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      class="svg-icon-search"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M7.71295742,1.53283795 C11.0266659,1.53283795 13.7129574,4.21912945 13.7129574,7.53283795 C13.7129574,9.0690006 13.1356609,10.4703284 12.1861834,11.5317059 L14.5333041,13.8784875 C14.7285663,14.0737497 14.7285663,14.3903321 14.5333041,14.5855943 C14.3597378,14.7591606 14.0903134,14.7784458 13.8954453,14.6434497 L13.8261974,14.5855943 L11.4604434,12.2188804 C10.4336319,13.0411023 9.13072017,13.5328379 7.71295742,13.5328379 C4.39924893,13.5328379 1.71295742,10.8465464 1.71295742,7.53283795 C1.71295742,4.21912945 4.39924893,1.53283795 7.71295742,1.53283795 Z M7.71295742,2.53283795 C4.95153368,2.53283795 2.71295742,4.7714142 2.71295742,7.53283795 C2.71295742,10.2942617 4.95153368,12.5328379 7.71295742,12.5328379 C10.4743812,12.5328379 12.7129574,10.2942617 12.7129574,7.53283795 C12.7129574,4.7714142 10.4743812,2.53283795 7.71295742,2.53283795 Z"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
  </span>
  <span
    #line
    *ngIf="iconPosition === 'right'"
    class="devui-search-line"
    [ngClass]="{ 'devui-search-line-sm': size === 'sm', 'devui-search-line-lg': size === 'lg', 'devui-clear-exit': clearIconExit }"
  >
  </span>
  <span
    *ngIf="!disabled"
    #clearIcon
    (click)="clearText()"
    class="devui-search-clear"
    [ngClass]="{
      'devui-search-clear-sm': size === 'sm',
      'devui-search-clear-lg': size === 'lg',
      'devui-clear-exit': clearIconExit,
      'devui-icon-left': iconPosition === 'left'
    }"
  >
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      class="svg-icon-clear"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z"
          fill="#D5D5DB"
          fill-rule="nonzero"
        ></path>
      </g>
    </svg>
  </span>
</div>
